<template>
  <!--  -->
  <div class="pagination">
    <el-pagination
      v-model:current-page="props.tableData.currentPage"
      v-model:page-size="props.tableData.pageSize"
      :page-sizes="[10, 50, 100, 200, 500]"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="props.tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
    />
  </div>
</template>
<script  lang="ts" setup>
const props = defineProps(["tableData"]);
const emits = defineEmits(["handleSizeChange", "handleCurrentChange"]);
const handleSizeChange = (val: number) => {
  emits("handleSizeChange", val);
};
const handleCurrentChange = (val: number) => {
  emits("handleCurrentChange", val);
};
</script>
<style lang="scss" scoped>
</style>